<!-- 导航条 -->
<template>
  <div class="je-admin-navigation">
    <!-- <i class="je-admin-navigation-switch jeicon jeicon-switch-direction"></i> -->
    <keep-alive>
      <component :is="activKey" :key="activKey" class="je-admin-navigation-item"></component>
    </keep-alive>
  </div>
</template>
<script>
  import { defineComponent, ref, computed } from 'vue';
  import AdminNavigationCrumbs from './components/crumbs.vue';
  import AdminNavigationTabs from './components/tabs.vue';
  export default defineComponent({
    name: 'AdminNavigation',
    components: {
      AdminNavigationCrumbs,
      AdminNavigationTabs,
    },
    setup() {
      const isTabs = ref(true);
      const activKey = computed(() => {
        return isTabs.value ? 'AdminNavigationTabs' : 'AdminNavigationCrumbs';
      });

      return { isTabs, activKey };
    },
  });
</script>
<style lang="less">
  .je-admin-navigation {
    display: flex;
    height: 46px;
    align-items: center;
    border-bottom: 1px solid lighten(@border-color-base, 10%);
    padding-left: 10px;
    &-switch {
      flex: none;
      padding: 10px;
      cursor: pointer;
      margin-top: 5px;
      &:hover {
        color: @primary-color;
      }
    }
    &-item {
      flex: auto;
      &.je-admin-navigation-tabs {
        align-self: flex-end;
      }
    }
  }
</style>
